<template>
    <div class="header">
        <div class="header-back" v-show="!showHeader" @click='back'>
            <span class='iconfont header-icon-back'>&#xe658;</span>
        </div>
        <div class='header-fixed'  :style="headerStyle" v-show="showHeader">
            <router-link to='/' tag='div' class="iconfont header-fixed-icon">&#xe658;</router-link>
            大连圣亚海洋世界
        </div>
    </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showHeader: false,
      headerStyle: null
    }
  },
  methods: {
    handlePageScroll () {
      const distance = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (distance > 60) {
        let opacity = distance / 140
        opacity = opacity > 1 ? 1 : opacity
        this.headerStyle = { opacity }
        this.showHeader = true
      } else {
        this.showHeader = false
      }
    },
    back () {
      this.$router.push('/')
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handlePageScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handlePageScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
.header-back
  width .8rem
  height .8rem
  background rgba(0,0,0,.8)
  border-radius 50%
  position absolute
  top .1rem
  left .2rem
  text-align center
  .header-icon-back
    font-size .6rem
    color #fff
    line-height .8rem
.header-fixed
  z-index 2
  position fixed
  top 0
  left 0
  right 0
  overflow hidden
  height $headerHeight
  line-height $headerHeight
  color #fff
  background $bgColor
  text-align center
  font-size .32rem
  .header-fixed-icon
    position absolute
    width .64rem
    font-size .5rem
</style>
